<template>
  <div class="coupon_detail">
    <div class="coupon_cover">
      <img :src="coupon.thumb_cdn" />
    </div>

    <van-notice-bar
      left-icon="volume-o"
      :scrollable="false"
      background="#fff"
      color="rgb(55, 68, 134)"
      v-if="BusinessList.length > 0"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in BusinessList" :key="item.id">{{
          `${item.business.nickname} 已领取该优惠券`
        }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <div class="coupon_info">
      <div class="left">
        <div class="left_top">
          <div>
            <span>{{ coupon.rate * 100 }}</span
            >折
          </div>
          <div class="top_info">
            <div>{{ coupon.title }}</div>
            <div>COUPON</div>
          </div>
        </div>
      </div>
      <div class="receive">
        <van-button
          type="primary"
          class="right_btn"
          v-if="coupon.receive"
          @click="OnReceive"
          >领取</van-button
        >
        <van-button type="danger" disabled class="right_btn" v-else
          >已领取</van-button
        >
      </div>
    </div>
    <div class="coupon_prompt">
      <div class="prompt_title">温馨提示：</div>
      <div><span>•</span>活动开始时间：{{ coupon.createtime_date }}</div>
      <div><span>•</span>活动结束时间：{{ coupon.endtime_date }}</div>
      <div><span>•</span>剩余数量：{{ coupon.total }} 张 每人限领1张</div>
    </div>
  </div>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
// 优惠券详情
const coupon = ref({});
// 优惠券id
const cid = ref(proxy.$route.query.cid);
// 已领取的用户数据
const BusinessList = ref([]);
// 挂载前钩子
onBeforeMount(() => GetCouponInfo());
// 获取优惠券详情数据
const GetCouponInfo = async () => {
  // 组装参数
  let params = {
    busid: business.value.id,
    cid: cid.value,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/coupon/info",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    coupon.value = result.data.coupon;
    BusinessList.value = result.data.BusinessList;
  } else {
    proxy.$fail({
      message: result.msg,
      // onClose: () => {
      //   proxy.$router.back();
      // },
    });
  }
};

// 领取优惠券
const OnReceive = () => {
  // 未登录
  if (business.value.hasOwnProperty("id") === false) {
    proxy
      .$confirm({
        title: "请先登录",
        message: "是否确认跳转到登录页？",
      })
      .then(() => {
        proxy.$cookies.set("redirect", true);
        proxy.$router.push("/business/login");
      })
      .catch(() => {});
    return;
  }
  // 领取优惠券确认框
  proxy
    .$confirm({
      title: "领取优惠券",
      message: "是否确认领取优惠券？",
    })
    .then(async () => {
      // 组装参数
      let params = {
        cid: cid.value,
        busid: business.value.id,
      };
      // 发起请求
      let result = await proxy.$http.post({
        url: "/coupon/receive",
        params,
      });
      // 处理请求结果
      if (result.code === 1) {
        proxy.$success({
          message: result.msg,
          onClose: () => {
            // 无刷新将其状态设置为已领取
            coupon.value.receive = false;
          },
        });
      } else {
        proxy.$fail(result.msg);
      }
    })
    .catch(() => {});
};
</script>

<style scoped>
@import url("/assets/css/CouponInfo.css");
</style>